<template>
  <div class="subPage">
    <i-toast id="toast" />
    <div class="top clearfix">
      <div class="topInit clearfix" v-if="talkInfo.status != '34' && talkInfo.status !== '03' && talkInfo.status !== '05'">
        <div v-if="talkInfo.category === '3' || talkInfo.category === '4'">
          <count-down v-if="time" :time='time' @chatEnd='chatAllowEnd'></count-down>
        </div>
        <div v-else>
          <span class="fl">问诊中</span>
        </div>
      </div>
      <div v-else>
        <span class="fr topInit">问诊已结束</span>
      </div>
    </div>
      <div class="chat">
				<!-- @scrolltoupper='moreMsg' @scroll="scroll" :scroll-into-view='domClass' -->
        <scroll-view scroll-y='true' style="height: 100%"  :scroll-top='scrollTop' :scroll-into-view='scrollId' :scroll-with-animation='true'>
        <!-- 点击头像查看侧边栏 -->
        <!-- <img src="/static/images/female.png" style="width:110rpx;height:110rpx" @click="queryDetails"> -->
        <div class='chating-wrapper' @click='chatingWrapperClick'>
          <div class="tipsP clearfix">
            <p>1.问诊期间,医患对话次数不限</p>
            <p v-if="talkInfo.category==3 || talkInfo.category==4">2.问诊最长为
              {{talkInfo.time_type?talkInfo.time_type:talkInfo.dept_name==='病理科'?'48':'24'}}
            小时,到期将自动结束</p>
            <p>{{(talkInfo.category==3 || talkInfo.category==4 )? "3":"2"}}.点击个人头像,可查看本次相关病情信息</p>
          </div>
          <!-- 患者预约信息 -->
          <!-- <div class="infoDetails clearfix">
            <div class="headImg">
              <img v-if="talkInfo.head_portrait_url" :src="talkInfo.head_portrait_url"  class='record-chatting-item-img'@click="sideDetails">
              <img v-else-if="talkInfo.sex === '女'&& !talkInfo.head_portrait_url" src="/static/images/male.png"  class='record-chatting-item-img' @click="sideDetails">
              <img v-else-if="!talkInfo.head_portrait_url" src="/static/images/female.png"  class='record-chatting-item-img' @click="sideDetails">
            </div>
            <div class="info">
              <div class="name">
                {{talkInfo.regular_name}}　患者
              </div>
              <div class="init">
                <div v-if="talkInfo.category_str === '图文问诊'" class="initTop">
                  <img src="/static/images/picIma.png" alt="" class="fl">图文问诊
                </div>
                <div v-if="talkInfo.category_str === '音频问诊'" class="initTop">
                  <img src="/static/images/source.png" alt="" class="fl">图文问诊
                </div>
                <div class="details">
                  <p class="detailsTitle"><text selectable='true'>患者信息</text></p>
                  <p class="textInfo regular">
                    <span><text selectable='true'>{{talkInfo.regular_name}}</text></span><span><text selectable='true'>{{talkInfo.sex}}</text></span><span><text selectable='true'>{{talkInfo.regular_age}}</text></span><span><text selectable='true'>{{talkInfo.address}}</text></span>
                  </p>
                  <p class="detailsTitle"><text selectable='true'>病情描述</text></p>
                  <p class="textInfo"><text selectable='true'>{{infoDetails.current_medical_history}}</text></p>
                  <p class="detailsTitle"><text selectable='true'>既往史</text></p>
                  <p class="blockClass" v-if="infoDetails.anamnesis.crb || infoDetails.anamnesis.jb || infoDetails.anamnesis.qt || infoDetails.anamnesis.sss">
                      <span v-if="infoDetails.anamnesis.crb"><text selectable='true'>传染病史:&nbsp;&nbsp;{{infoDetails.anamnesis.crb}}　</text></span>
                      <span v-if="infoDetails.anamnesis.jb"><text selectable='true'>疾病史:&nbsp;&nbsp;{{infoDetails.anamnesis.jb}}　</text></span>
                      <span v-if="infoDetails.anamnesis.qt"><text selectable='true'>其它:&nbsp;&nbsp;{{infoDetails.anamnesis.qt}}　</text></span>
                      <span v-if="infoDetails.anamnesis.sss"><text selectable='true'>手术史:&nbsp;&nbsp;{{infoDetails.anamnesis.sss}}</text></span>
                  </p>
                  <p v-else>
                    无
                  </p>
                  <p class="detailsTitle"><text selectable='true'>过敏史</text></p>
                  <p class="blockClass textInfo" v-if="infoDetails.allergy_history.qt || infoDetails.allergy_history.swgm || infoDetails.allergy_history.ywgm">
                    <span v-if="infoDetails.allergy_history.qt"><text selectable='true'>其他:&nbsp;&nbsp;{{infoDetails.allergy_history.qt}}　</text></span>
                    <span v-if="infoDetails.allergy_history.swgm"><text selectable='true'>食物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.swgm}}　</text></span>
                    <span v-if="infoDetails.allergy_history.ywgm"><text selectable='true'>药物过敏:&nbsp;&nbsp;{{infoDetails.allergy_history.ywgm}}　</text></span>
                  </p>
                  <p v-else class="textInfo">
                    无
                  </p>
                </div>
              </div>
            </div>
          </div> -->
          <!-- 消息记录 -->
          <div class='record-wrapper' id="recordWrapper">
            <div v-for="(message, index) in showMsgArr" :key="index" :id="'msg' + index">
              <!-- 显示间隔时间，超过2分钟就会出现时间节点 -->
              <div class='record-item-time-wrapper' v-if="message.displayTimeHeader !== '' && message.type !== 'tip'" >
                <span class='record-item-time'>{{message.displayTimeHeader}}</span>
              </div>
              <!-- // 发出消息 -->
              <div v-if="message.sendOrReceive === 'send' && message.type !== 'tip'" :class="{'record-chatting-item self': message.sendOrReceive === 'send'}" style="justify-content:flex-end">
                <!-- 感叹号 -->
                <div class="failDiv">
                   <img v-if="message.status=='fail'" :src="msgFailImg" @click="resendMessage(message)" class="msgFail" />
                   <img v-if="message.status=='sending'" :src="msgSendingImg" class="msgFail" />
                </div>
                <div v-if="message.type === 'audio'"  @click='playAudio(message)' @longpress='longpressAction(message)' class='audio-wrapper clearfix' :style="{width: (((message.audio.dur / 1000 << 1 >> 1) * 8 + 160) < 400 ? ((message.audio.dur / 1000 << 1 >> 1) * 8 + 160) : 400)  + 'rpx!important'}">
                  <span class='text fr' style='color:#fff;' v-if="message.audio.dur / 1000 !== 0">{{message.audio.dur / 1000 << 1 >> 1}}''</span>
                  <image :src='fillImg' class='audioImage fr'></image>
                </div>
                <rich-text v-if="message.type === 'text'" class='record-chatting-item-text' @longpress='longpressAction(message)' :nodes="message.nodes"></rich-text>
                <image v-if="message.type === 'image'" lazy-load='true' mode='aspectFill' class='record-chatting-item-text nobg'  @longpress='longpressAction(message)' @click='lookImg(message)' :src='message.nodes[0].attrs.src'  @error='errorImg($event, message)'></image>
                <!-- <rich-text v-if="message.type === 'image'" class='record-chatting-item-text nobg ' :nodes="message.nodes" @click='lookImg(message)'></rich-text> -->
                <rich-text v-if="message.type === '猜拳' || message.type === '贴图表情'" class='record-chatting-item-text nobg' :nodes="message.nodes" ></rich-text>
                <text v-if="message.type !== 'tip' && message.type !== 'notification' && message.type !== 'image' && message.type !== 'video' && message.type !== 'geo' && message.type !== '猜拳' && message.type !== '贴图表情'" class='right-triangle'></text>
                <img v-if="userInfo.headImg" :src="userInfo.headImg"  class='record-chatting-item-img' @click="sideDetails">
                <img v-else-if="userInfo.sex === '女'&& !userInfo.headImg" :src="maleImg"  class='record-chatting-item-img' @click="sideDetails">
                <img v-else :src="femaleImg"  class='record-chatting-item-img' @click="sideDetails">
              </div>
              <!-- // 收到消息 -->
              <div v-if="message.sendOrReceive === 'receive' && message.type !== 'tip'"  :class="{'record-chatting-item other': message.sendOrReceive === 'receive'}" style="justify-content:flex-start">
                <img v-if="talkInfo.doctorImg" :src="talkInfo.doctorImg"  class='record-chatting-item-img'>
                <img v-else-if="talkInfo.sex === '女'&& !talkInfo.doctorImg" :src="doctor_male_img"  class='record-chatting-item-img'>
                <img v-else-if="!talkInfo.doctorImg" :src="doctor_female_img"  class='record-chatting-item-img'>
                <text v-if="message.type !== 'tip' && message.type !== 'notification' && message.type !== 'image' && message.type !== 'video' && message.type !== 'geo' && message.type !== '猜拳' && message.type !== '贴图表情'" class='left-triangle'></text>
                <image v-if="message.type === 'image'" lazy-load='true' mode='aspectFill' class='record-chatting-item-text nobg' @click='lookImg(message)' :src='message.nodes[0].attrs.src'></image>
                <rich-text v-if="message.type === '猜拳' || message.type === '贴图表情'" class='record-chatting-item-text nobg' :nodes="message.nodes"></rich-text>
                <rich-text @longpress='longpressRegularAction(message)' v-if="message.type === 'text' || message.type === 'file' || message.type === '白板消息' || message.type === '阅后即焚' || message.type === 'robot'|| message.type === 'custom'" class='record-chatting-item-text' style='color:#000;background-color:#fff;'  :nodes="message.nodes" type='text'></rich-text>
                <div v-if="message.type === 'audio'"  @click='playAudio(message)' class='audio-wrapper leftSend clearfix send-audio' :style="{width: (((message.audio.dur / 1000 << 1 >> 1) * 8 + 100) < 400 ? ((message.audio.dur / 1000 << 1 >> 1) * 8 + 100) : 400)  + 'rpx!important'}">
                  <image :src='fillLeftImg' class='leftSendImg'></image>
                  <span class='text' style="color: #000;">{{message.audio.dur / 1000 << 1 >> 1}}''</span>
                </div>
              </div>
            </div>
            <div v-if='showMsgArr.length > 0'>
              <div v-if="showMsgArr[showMsgArr.length - 1].type === 'tip' && !showMsgArr[showMsgArr.length - 1].nodes && showMsgArr[showMsgArr.length - 1].sendOrReceive === 'receive'" class="endChat">
                您的问诊已结束,感谢使用!
              </div>
            </div>
            <div id='scrollBtm' style="height: 2px;"></div>
          </div>
        </div>
        </scroll-view>
      </div>
      <!-- 输入框+表情+更多 -->
      <div class='chatinput-wrapper clearfix' @click.stop='stopEventPropagation'>
        <div v-if="talkInfo.status === '34' ||talkInfo.status === '03' || talkInfo.status === '05' || (talkInfo.category === '3' && chatEnd)" class='chatinput-content'>
          <div style="height: 100rpx; line-height: 100rpx; text-align: center;color: #F85C5C;">问诊已经结束!</div>
        </div>
        <div v-else class="clearfix">
          <div style="border-top: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;" :class="{'chatinput-content': true, isIphone: isIpx, 'btmDiv': true}">
            <span v-if="hadAudio" class="spanDiv1">
              <img :src='audioImg' v-if="showSource" class='chatinput-img' @click="changeSourceStatu">
              <img :src='keyBordImg' v-if="!showSource" class='chatinput-img' @click="changeSourceStatu">
            </span>
            <span v-if="!showSource && hadAudio"  @touchstart='longPressStart' @touchend='longPressEnd' class="pressBtn" @touchmove='moveStart'>
              {{isLongPress ? '松开结束' : '按住说话'}}
            </span>
            <textarea v-if="sendType === 0 && showSource && !textareaState" :value='inputValue' @focus="scrollBottom" @input='inputchange' @blur='profile' focus="true" auto-height :class="{'sendInput': true, 'iosPadding': !isIos}" maxlength="-1" cursor-spacing="30" :show-confirm-bar='false'></textarea>
            <div v-if="textareaState && showSource" :class="{'sendInput': true, 'textDiv': true, 'iosPadding': isIos}" @click="changeText">
              <div v-if="inputValue.length == 0" style="color: #808080;"></div>
              <div v-else>{{inputValue}}</div>
            </div>
            <span class="spanDiv">
              <img :src='moreImg' @click.stop='toggleMore' class='chatinput-img fr'>
              <span @click.stop='inputSend(inputValue)'>发送</span>
            </span>
          </div>
          <!-- 更多隐藏部分 v-if="moreFlag"-->
          <div v-if="moreFlag" :class="{ 'more-subconten': true, 'active': moreFlag }">
            <div style='display:flex;justify-content: space-between;padding-left: 30rpx;'>
              <div class='more-subcontent-item' @click.stop='videoCall' v-if="showVideo">
                <img :src="videoImg" class='image'>
                <text class='text'>视频通话</text>
              </div>
              <!-- <div class='more-subcontent-item' @click.stop='touseword'>
                <img src="/static/images/chang.png" class='image'>
                <text class='text'>常用语</text>
              </div> -->
              <div class='more-subcontent-item' @click.stop='chooseImageToSend'>
                <img :src="photoImg" class='image'>
                <text class='text'>图片</text>
              </div>
              <div class='more-subcontent-item'><div class='image' style='background-color: transparent;' v-if="!showVideo"></div><text class='text'></text></div>
              <div class='more-subcontent-item'><div class='image' style='background-color: transparent;'></div><text class='text'></text></div>
              <div class='more-subcontent-item'><div class='image' style='background-color: transparent;'></div><text class='text'></text></div>
            </div>
          </div>
        </div>
      </div>
      <i-message id="message" />
    <!-- 弹出层 -->
      <!-- 侧边信息 -->
      <i-drawer mode="left" :visible="showLeft" @close="toggleLeft" v-if="showLeft">
        <div class="demo-container">
          <side-details></side-details>
        </div>
      </i-drawer>
      <!-- 语音提示 -->
      <div class="yuyinTip" v-if="showYuyinTips">
        <div class="yuyinInit">
          <img :src="yuyinOkImg" class="imgYuyin" v-if="moveUp && !timeOut"/>
          <img :src="yuyinNgImg" class="imgYuyin" v-if="!moveUp  && !timeOut"/>
          <img :src="gantanhaoImg" class="gantan" v-if="timeOut"/>
          <div>{{textTips}}</div>
        </div>
      </div>
      <div class="msgError" v-if="msgErrorStatus">
        <div class="topDiv">
          加载失败
        </div>
        <div class="midDiv">
          <p>最新的聊天记录获取失败，点击刷新可恢复历史聊天记录</p>
          <p></p>
        </div>
        <div class="btmDiv">
          <div @click="backList">返回列表</div>
          <div @click="reload">刷新</div>
        </div>
      </div>
  </div>
</template>

<script>
  let app = getApp()
  let store = app.store
  import nim from '@/utils/nim'
  import api from '@/api/api'
  let oldMsgList = []
  import storage from '@/utils/storage'
  import { formatTime } from '@/utils/index'
  import sideDetails from '@/components/sideDetails'
  import countDown from '@/components/countDown'
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import Bus from '@/utils/bus.js'
  import * as iconBase64Map from '@/pages/subPage/liveVideoArea/nim/utils/imageBase64.js'
  const { $Toast, $Message } = require('../../../../../static/iview/base/index')
  export default {
    components: {
      sideDetails, countDown
    },
    data () {
      return {
        scrollId: '',
        myFormat: ['时', '分', '秒'],
        scrollTop: 0,
        chatTo: '', //聊天对象account  321562894706185.kf
        chatType: 'p2p', //聊天类型 advanced 高级群聊 normal 讨论组群聊 p2p 点对点聊天
        loginAccountLogo: '/static/images/female.png',  // 登录账户对象头像
        iconBase64Map: {}, //发送栏base64图标集合
        showLeft: false,
        time: 0,
        focusFlag: false, // 控制输入框失去焦点与否
        emojiFlag: false, // emoji键盘标志位
        moreFlag: false, // 更多功能标志
        tipFlag: false, // tip消息标志
        sendType: 0, //发送消息类型，0 文本 1 语音
        messageArr: [], //[{text, time, sendOrReceive: 'send', displayTimeHeader, nodes: []},{type: 'geo',geo: {lat,lng,title}}]
        showMsgArr: [
          {
            type: '',
            nodes: [],
            sendOrReceive: ''
          }
        ], // 显示在页面的前20条消息
        inputValue: '',//文本框输入内容
        chatEnd: false, // 聊天是否结束
        showVideo: false,// 是否可以进行视频聊天
        pageIndex: 1, // 聊天记录页数的下表
        domClass: '',
        userInfo: {},
        flag: false,
        imgList: 0 , // 发送图片的长度
        nowLenght: 0, // 现在发到第几章去了
        hadAudio: false, // 是否可以按键说话
        showSource: true,
        isLongPress: false, // 录音按钮是否正在长按
        recordClicked: false, // 判断手指是否触摸录音按钮
        recorderManager: null, // 微信录音管理对象
        isIpx: Boolean,
        baocunIpx: Boolean, // 保存起来
        showYuyinTips: false, // 语音提示
        textTips: '上滑取消语音',
        moveUp: true,
        y: 0 ,// 现在高度
        allowSend: true, // 是否可以发送语音
        timeOut: false,
        yuyinTime: 0,
        timeInterval: null,
        modelStatus: false,
        audioContext: null,
        textareaState: true,
        isIos: true,
        infoDetails: {
          anamnesis: { // 既往史
            crb: '',
            jb: '',
            qt: '',
            sss: ''
          },
          obsterical_history: { // 婚育史
            hyzk: '',
            syzt: ''
          },
          allergy_history: { // 过敏史
            qt: '',
            swgm: '',
            ywgm: ''
          },
          family_history: { // 家族史
            qt: '',
            jzs_jsz: ''
          },
          personal_habits: { // 个人习惯
            qt: '',
            grxg_grxg: ''
          },
          upload_image: []
        },
        playStatus: Boolean, // 是否音频播放中
        playInfo: {},
        networkType: '',
        failFileMsg:[],
        oldMsgList: [], // 原始的历史消息
        imgUrl:'',
        loadingImgUrl:'http://static.oschina.net/uploads/space/2015/0724/100832_XWND_2392582.gif',
        msgErrorStatus: false,
        queryMsgsTimer:'',
        failTimes:0, //获取记录失败次数
        msgFailImg: '',
        msgSendingImg: '',
        fillImg: '',
        maleImg: '',
        femaleImg: '',
        doctor_male_img: '',
        doctor_female_img: '',
        fillLeftImg: '',
        audioImg: '',
        keyBordImg: '',
        moreImg: '',
        videoImg: '',
        photoImg: '',
        yuyinOkImg: '',
        yuyinNgImg: '',
        gantanhaoImg: '',
        imgFailImg: '',
        canSend: true,
        refresTime: null // 每次发送消息成功后的定时请求
      }
    },
    computed: {
      ...mapState([
       'talkInfo', 'regularInfo', 'sessionsList'
      ])
    },
    onShow () {
      let that = this
      that.failTimes=0
      that.msgErrorStatus = false
      nim.reconnection()
      that.showYuyinTips = false
      that.audioContext = mpvue.createInnerAudioContext()
      setTimeout(function () {
        that.getHistoryMsg()
      },500)
    },
    onHide () {
      if (this.showYuyinTips){
        this.showYuyinTips = false
        this.longPressEnd()
      }
    },
    onLoad (options) {
      console.log(this.talkInfo,'talkinfo')
      this.canSend = options.canSend?options.canSend:true
      console.log(this.canSend)
      let that = this
      setTimeout(function () {
        mpvue.showLoading({
          title: '消息恢复中...',
          mask: false
        })
      },500)
      that.imgUrl = that.$imgUrl
      that.msgFailImg = api.imgUrl + 'msgFail.png'
      that.msgSendingImg = api.imgUrl + 'msg_sending.gif'
      that.fillImg = api.imgUrl + 'fill.png'
      that.maleImg = api.imgUrl + 'male.png'
      that.femaleImg = api.imgUrl + 'female.png'
      that.doctor_male_img = api.imgUrl + 'doctor_male_img.png'
      that.doctor_female_img = api.imgUrl + 'doctor_female_img.png'
      that.fillLeftImg = api.imgUrl + 'fillLeft.png'
      that.audioImg = api.imgUrl + 'audio.png'
      that.keyBordImg = api.imgUrl + 'keyBord.png'
      that.moreImg = api.imgUrl + 'more.png'
      that.videoImg = api.imgUrl + 'video.png'
      that.photoImg = api.imgUrl + 'photo.png'
      that.yuyinOkImg = api.imgUrl + 'yuyinOk.png'
      that.yuyinNgImg = api.imgUrl + 'yuyinNg.png'
      that.gantanhaoImg = api.imgUrl + 'gantanhaoImg.png'
      that.loginAccountLogo = api.imgUrl + 'female.png'
      // that.imgFailImg = api.imgUrl + 'imgFail.png'

      // 显示未读消息
      let arr = this.$storage.getMsg() || []
      that.inputValue = ''
      if (arr.length > 0) {
        for (let i = 0; i < arr.length; i++) {
          if (arr[i].aptId == that.talkInfo.apt_id) {
            that.inputValue = arr[i].text
          }
        }
      }
      // 告知服务器，重置会话未读数，更新会话对象
      nim.resetSessionUnread(that.talkInfo.sessionId)
      store.dispatch({
        type: 'CurrentChatTo_Change',
        payload: that.talkInfo.sessionId
      })
      that.userInfo = that.$storage.getAccountInfo()
      that.showMsgArr = []
      that.time = that.talkInfo.diagnose_time
      console.log(that.time,'在这')
      // that.getInfo(that.talkInfo.apt_id)
      that.showSource = true
      that.domClass = ''
      that.pageIndex = 1
      mpvue.setNavigationBarTitle({
        title: that.talkInfo.doctor_name || '图文问诊',
      })
      // // 是否有视频功能
      mpvue.getStorage({
        key: 'haveVedio',
        success (res) {
          if (res.data === '2') {
            that.showVideo = true
          } else {
            that.showVideo = false
          }
        }
      })
      // 是否有按键说话
      if (options.hadAudio) {
        that.hadAudio = true
      } else {
        that.hadAudio = false
      }
      that.chatTo = that.talkInfo.netease_id
      Bus.$on('addMsg', (res) => {
        if (!that.talkInfo.sessionId) {
          return
        }
        let obj = res[that.talkInfo.sessionId]
        let keysList = Object.keys(obj)
        let lastObj = new Map()
        lastObj.set(obj[keysList[keysList.length - 1]].idClient,obj[keysList[keysList.length - 1]])
        let lastMsg = that.convertRawMessageListToRenderMessageArr(lastObj)[0]
        console.log(lastMsg, 'lastMsg')
        if (that.showMsgArr.length === 0) {
          that.$set(that.showMsgArr, 0, lastMsg)
        } else {
          if (lastMsg.idClient === that.showMsgArr[that.showMsgArr.length - 1].idClient) {
            that.oldMsgList.set(obj[keysList[keysList.length - 1]].idClient,obj[keysList[keysList.length - 1]])
            return
          } else {
            let dalta = (lastMsg.time - that.showMsgArr[that.showMsgArr.length - 1].time) / (120 * 1000)
            if (dalta > 1) {
              that.$set(that.showMsgArr, that.showMsgArr.length, lastMsg)
            } else {
              lastMsg['displayTimeHeader'] = ''
              that.$set(that.showMsgArr, that.showMsgArr.length, lastMsg)
            }
            that.oldMsgList.set(obj[keysList[keysList.length - 1]].idClient, obj[keysList[keysList.length - 1]])
            if (that.showMsgArr[that.showMsgArr.length - 1].type === 'tip' && !that.showMsgArr[that.showMsgArr.length - 1].nodes && that.showMsgArr[that.showMsgArr.length - 1].sendOrReceive === 'receive') {
              let obj = that.talkInfo
              obj.status = '03'
              that.$store.commit(that.$types.TALK_INFO, obj)
              console.log(that.talkInfo, '结束问诊')
            }
            setTimeout(()=>{
              that.scrollTop = that.scrollTop + 200
            },100)

          }
        }
      })
      Bus.$on('onContactRecallMsg', (msg) => {
        if (!that.talkInfo.sessionId) {
          return
        }
        console.log('onContactRecallMsg',msg)
        if (msg.from==that.talkInfo.netease_id){
          that.onContactRecallMsg(msg)
        }
      })
      Bus.$on('checkUsefulWord', (res) => {
         that.showSource = true
         that.moreFlag = false
         that.isIpx = that.baocunIpx
         that.inputValue = res
      })
      // Bus.$on('imConnect', (res) => {
      //     that.getHistoryMsg()
      // })
      mpvue.getSystemInfo({
       success: function(res) {
         var model = res.model
          if (model.search('iPhone X') != -1){
             that.isIpx = true;
             that.baocunIpx = true
          }else{
            that.isIpx = false;
            that.baocunIpx = false
          }
          if (model.search('iPhone') != -1){
             that.isIos = true;
          }else{
            that.isIos = false;
          }
        },
      })
    },
    methods: {
      onContactRecallMsg(msg){
        var that =this
        for (let i = 0; i < that.showMsgArr.length; i++) {
          if (msg.idClient == that.showMsgArr[i].idClient) {
            that.oldMsgList.delete(that.showMsgArr[i].idClient)
            that.showMsgArr.splice(i,1)//发送成功移除消息
            $Message({
              content: '对方撤回一条消息',
              type: 'warning'
            })
            break;
          }
        }
      },
      // 刷新
      reload () {
        let that = this
        nim.destroy({
          done:function () {
            nim.reconnection()
          }
        })
        that.msgErrorStatus = false
        mpvue.showLoading({
          title: '消息恢复中...',
          mask: true
        })
        // setTimeout(()=>{
        //   that.getHistoryMsg()
        // },500)
      },
      // 返回列表
      backList () {
        this.msgErrorStatus = false
        mpvue.navigateBack()
      },
      errorImg ($event, msg) {
        // console.log($event, '$event')
        // console.log(msg, 'msg')
        msg.nodes[0].attrs.src = '/static/images/imgFail.png'
        this.$set(msg.nodes[0].attrs, 'height', '50rpx')
        this.$set(msg.nodes[0].attrs, 'width', '60rpx')
        // msg.nodes[0].attrs.height = '50rpx'
        // msg.nodes[0].attrs.width = '60rpx'
      },
      //获取历史消息
      getHistoryMsg(){
        var that=this
        console.log(that.talkInfo, 'chatInfo')
        // console.log(that.$utils.filterTime(that.talkInfo.apt_diagnose_time,7))
        nim.getHistoryMsgs({
          scene: 'p2p',
          to: that.talkInfo.netease_id,
          beginTime:that.talkInfo.apt_diagnose_time ? that.talkInfo.apt_diagnose_time - 24 * 60 * 60 : (that.talkInfo.diagnose_time - 24 * 60 * 60),//就诊时间 到秒级 nim处理了时间转换
          endTime:that.talkInfo.diagnose_time ? that.talkInfo.diagnose_time + 24 * 60 * 60 : (that.talkInfo.apt_diagnose_time + 24 * 60 * 60),//结束时间  到秒级 nim处理了时间转换
          done: that.getHistoryMsgsDone
        })
      },
      //重发消息
      resendMessage(message){
        let that = this
        //删除失败消息
        for (let i = 0; i < that.showMsgArr.length; i++) {
          if (that.showMsgArr[i].idClient==message.idClient){
            that.showMsgArr.splice(i,1)
            break;
          }
        }
        let localMsgArr = storage.getLocalMsg();
        for (let i = 0; i <localMsgArr.length ; i++) {
          if (localMsgArr[i].idClient == message.idClient) {
            localMsgArr.splice(i, 1)
            storage.setLocalMsg(localMsgArr)
            break;
          }
        }
        setTimeout(()=>{
          switch (message.type) {
            case 'text':
              that.sendRequest(message.text)
              break;
            case 'image':
              that.sendImages([message.localFilePath])
              break;
            case 'audio':
              that.sendAudioMsg(message.localFilePath)
              break;
            default:
              that.$utils.showToast('text', '该消息类型不支持重发')
              break;
          }
        },100)


      },
      // 撤回消息
      recallMessage(message) {
        let that = this
        let rawMessage = this.oldMsgList.get(message.idClient)
        console.log('撤回',rawMessage)
        nim.deleteMsg({
          msg: rawMessage,
          done: function (err, { msg }) {
            if (err) { // 撤回失败
              if (err.code==508){//超过撤回时间
                that.$utils.showToast('text', '撤回失败：超过撤回时间限制')
              }else {
                that.$utils.showToast('text', '撤回失败')
              }
              return
            } else {// 撤回成功

            for(let i = 0; i < that.showMsgArr.length; i++) {
              if (that.showMsgArr[i].idClient == msg.idClient) {
                that.showMsgArr.splice(i, 1)
              }
            }
              store.dispatch({
                type: 'RawMessageList_Recall_Msg',
                payload: msg
              })
              that.$utils.showToast('text', '撤回成功')
            }
          }
        })
      },
      // 复制患者发送的文字
      longpressRegularAction (msg) {
        if (msg.type === 'tip') {
          return
        }
        mpvue.showActionSheet({
          itemList: ['复制'],
          success: function (res) {
            switch (res.tapIndex) {
              case 0:
                mpvue.setClipboardData({
                  data: msg.text,
                  success (res) {
                    mpvue.getClipboardData({
                      success (res) {
                        console.log(res.data) // data
                      }
                    })
                  }
                })
                break
              default:
                break
            }
          }
        })
      },
      // 医生自己长按显示操作按钮，发送成功-撤回，失败的-删除/重发
      longpressAction (msg) {
        console.log(msg, 'msg')
        let that = this
        if (msg.type === 'tip') {
          return
        }
        if (msg.status==nim.msgStatus_success){//发送成功-撤回
          if (msg.type == 'text') { // 文字才有复制功能
            mpvue.showActionSheet({
              itemList: ['撤回', '复制'],
              success: function (res) {
                switch (res.tapIndex) {
                  case 0:
                    mpvue.showActionSheet({
                      itemList: ['确定撤回'],
                      itemColor: '#ff0000',
                      success: function (res) {
                        if (res.tapIndex === 0) {
                          console.log('确定撤回')
                          that.recallMessage(msg)
                        }
                      }
                    })
                    break
                    case 1:
                      mpvue.setClipboardData({
                        data: msg.text,
                        success (res) {
                          mpvue.getClipboardData({
                            success (res) {
                              console.log(res.data) // data
                            }
                          })
                        }
                      })
                      break
                  default:
                    break
                }
              }
            })
          } else if (msg.type == 'image' || msg.type=='audio') {
            mpvue.showActionSheet({
              itemList: ['撤回'],
              success: function (res) {
                switch (res.tapIndex) {
                  case 0:
                    mpvue.showActionSheet({
                      itemList: ['确定撤回'],
                      itemColor: '#ff0000',
                      success: function (res) {
                        if (res.tapIndex === 0) {
                          console.log('确定撤回')
                          that.recallMessage(msg)
                        }
                      }
                    })
                    break
                  default:
                    break
                }
              }
            })
          }
        }else if (msg.status==nim.msgStatus_fail){
          mpvue.showActionSheet({
            itemList: ['重发','删除'],
            success: function (res) {
              switch (res.tapIndex) {
                case 0:
                 console.log('重发')
                  that.resendMessage(msg)
                      break
                case 1:
                  mpvue.showActionSheet({
                    itemList: ['确定删除'],
                    itemColor: '#ff0000',
                    success: function (res) {
                      if (res.tapIndex === 0) {
                        console.log('确定删除')
                        that.removeLocalMsg(msg)
                      }
                    }
                  })
                  break
                default:
                  break
              }
            }
          })
        }
        // else if (msg.status==nim.msgStatus_sending) {
        //   mpvue.showActionSheet({
        //     itemList: ['删除'],
        //     success: function (res) {
        //       switch (res.tapIndex) {
        //         case 0:
        //           that.removeLocalMsg(msg)
        //           break
        //       }
        //     }
        //   })
        // }

      },
      //移除失败消息
      removeLocalMsg(msg){
        var that =this
        var localMsgArr=storage.getLocalMsg()
        for (let i = 0; i < localMsgArr.length; i++) {
          if (msg.idClient==localMsgArr[i].idClient ){
            localMsgArr.splice(i,1)//发送成功移除消息
            storage.setLocalMsg(localMsgArr)
            console.log('移除本地发送失败消息')
            break;
          }
        }

        for (let i = 0; i < that.showMsgArr.length; i++) {
          if (msg == that.showMsgArr[i]) {
            that.oldMsgList.delete(that.showMsgArr[i].idClient)
            that.showMsgArr.splice(i,1)//发送成功移除消息
            break;
          }
        }

      },
      // 查看详情
      getInfo (id) {
        let that  = this
        that.$api.getEmrInfo({'apt_id': id}, ({'showLoading': true})).then(function (res) {
          that.infoDetails = res.data[0]
          that.infoDetails.allergy_history = that.infoDetails.allergy_history
          that.infoDetails.anamnesis = that.infoDetails.anamnesis
          that.infoDetails.family_history = that.infoDetails.family_history
          that.infoDetails.obsterical_history = that.infoDetails.obsterical_history
          that.infoDetails.personal_habits = that.infoDetails.personal_habits
        })
      },
      profile () {
        this.textareaState = !this.textareaState
      },
      scrollBottom () {
        setTimeout(() => {
          this.scrollTop = this.scrollTop + 200;
        }, 200);
      },
      changeText () {
        console.log('999')
        this.isIpx = this.baocunIpx
        this.moreFlag = false
        this.textareaState = !this.textareaState
        setTimeout(() => {
          this.scrollTop = this.scrollTop + 200;
        }, 200);
      },
      inputchange (e) {
        let stringStr = e.target.value.substring(0, 1)
        this.inputValue = e.target.value
        if (stringStr == ' ') {
          this.inputValue = this.inputValue.substring(1, this.inputValue.length)
        }
      },
      // 语音长度
      countWidth (num) {
        let count = num + 80 + 'rpx!important'
        return count
      },
      // 播放音频
      playAudio(info) {
        let that = this
        if (that.playStatus && that.playInfo === info) {
          that.audioContext.destroy()
          that.playStatus = false
          that.playInfo = {}
          mpvue.hideToast()
          return
        }
        that.audioContext.destroy()
        that.playInfo = info
        that.audioContext = mpvue.createInnerAudioContext()
        that.$utils.showToast('text', '播放中', {
          duration: 120 * 1000,
          mask: true
        })
        let audio = info.audio
        mpvue.setInnerAudioOption({
          obeyMuteSwitch: false,
        })
        if (audio.ext === 'mp3') { // 小程序发送的
          that.audioContext.src = audio.url
        } else {
          that.audioContext.src = audio.mp3Url
        }
        that.audioContext.play()
        that.audioContext.onPlay(() => {
          that.playStatus = true
        })
        that.audioContext.onEnded(() => {
          that.playStatus = false
          mpvue.hideToast()
        })
        that.audioContext.onPause(() => {
          that.playStatus = false
          mpvue.hideToast()
        })
        that.audioContext.onError((res) => {
          that.$utils.showToast('text', res.errCode)
        })
      },
      // 发送语音消息
      sendAudioMsg(tempFilePath) {
        let that = this
        // mpvue.showLoading({
        //   title: '发送中...',
        //   mask: true
        // })
        let newObject = {
          // 多个就诊人区分
          regular_id: that.talkInfo.regular_id + '',
          category: that.talkInfo.category + '',
          aptId: that.talkInfo.apt_id
        }
        var localMsg = nim.sendFile({
          scene: 'p2p',
          to: that.chatTo,
          type: 'audio',
          wxFilePath: tempFilePath,
          custom: JSON.stringify(newObject),
          done: that.sendFileDone
        })
        // 存储数据到store
        that.saveChatMessageListToStore(localMsg)
      },
      sendFileDone (err, msg) {
        var that =this
        // mpvue.hideLoading()
        // 判断错误类型，并做相应处理
        if (this.handleErrorAfterSend(err)) {
          nim.reconnection()
          // that.$utils.showToast('text', '网络异常,请稍后重新发送或重新登录')
          // return
        }
        let localMsgArr = storage.getLocalMsg();
        if (err){
          for (let i = 0; i < localMsgArr.length; i++) {
            if (msg.to==localMsgArr[i].to && msg.filePath==localMsgArr[i].localFilePath){
              localMsgArr[i].status=nim.msgStatus_fail//发送失败，将本地消息状态改为失败
              storage.setLocalMsg(localMsgArr)
              console.log('修改本地失败消息状态')
              break;
            }
          }
          for (let i = 0; i < that.showMsgArr.length; i++) {
            let showItem = that.showMsgArr[i];
            if ( msg.filePath==showItem.localFilePath){
              console.log('修改列表消息')
              showItem.status = nim.msgStatus_fail//将消息状态改为失败
              break;
            }
          }
        }else {//成功
          for (let i = 0; i < localMsgArr.length; i++) {
            if (msg.file.name==localMsgArr[i].localFilePath ){
              localMsgArr.splice(i,1)//发送成功移除消息
              storage.setLocalMsg(localMsgArr)
              console.log('移除本地发送成功消息')
              break;
            }
          }
          for (let i = 0; i < that.showMsgArr.length; i++) {
            if (msg.file.name == that.showMsgArr[i].localFilePath) {
              console.log('修改列表消息')
              that.showMsgArr[i].status = nim.msgStatus_success//将消息状态改为成功
              that.oldMsgList.delete(that.showMsgArr[i].idClient)
              that.showMsgArr[i].idClient = msg.idClient
              if (msg.type=='audio'){
                that.showMsgArr[i].audio=msg.file
              }
              that.oldMsgList.set(msg.idClient,msg)
              break;
            }
          }
          clearTimeout(that.refresTime)
          that.refresTime = setTimeout(function() {
          	that.getHistoryMsg()
            console.log('发送成功，重新加载')
          }, 5 * 1000);
        }

      },
      // 开始录音
      startRecord() {
        let that = this
        let time = null
        that.showYuyinTips = true
        // that.$utils.showToast('text', '开始录音', { duration: 120000 })
        const recorderManager = that.recorderManager || mpvue.getRecorderManager()
        const options = {
          duration: 60 * 1000,
          format: 'mp3'
        }
        recorderManager.start(options)
        that.recorderManager = recorderManager
        // recorderManager.start(options)
        // that.recorderManager = recorderManager
        // that.timeInterval = setInterval(() => {
        //   that.yuyinTime = that.yuyinTime +1
        //   if (that.yuyinTime === 61) {
        //     clearInterval(that.timeInterval)
        //     that.timeOut = true
        //     that.textTips = '说话超时'
        //     recorderManager.onStop((res) => {
        //       that.showYuyinTips = false
        //       if (!that.allowSend) {
        //         return
        //       }
        //       that.sendAudioMsg(res)
        //     })
        //     that.longPressEnd()
        //     return
        //   }
        // }, 1000)
        recorderManager.onStop((res) => {
          console.log(res)
          clearInterval(that.timeInterval)
          if (res.duration < 1000) {
            // that.$utils.showToast('text', '录音时间太短')
            that.timeOut = true
            that.textTips = '说话时间太短'
            setTimeout(() => { // ok
              that.showYuyinTips = false
            }, 1000)
          } else {
            that.showYuyinTips = false
            if (!that.allowSend) {
              return
            }
            that.sendAudioMsg(res.tempFilePath)
          }
        })
      },
      // 按住移动
     moveStart (e) {
       if (this.y - e.pageY >= 80) {
         this.moveUp = false
         this.allowSend = false
       } else {
         this.moveUp = true
         this.allowSend = true
       }
     },
      // 执行录音逻辑
      executeRecord() {
        let that = this
        that.isLongPress = true
        mpvue.getSetting({
          success: (res) => {
            let recordAuth = res.authSetting['scope.record']
            if (recordAuth == false) { //已申请过授权，但是用户拒绝
              mpvue.openSetting({
                success: function (res) {
                  let recordAuth = res.authSetting['scope.record']
                  if (recordAuth == true) {
                    that.$utils.showToast('success', '授权成功')
                  } else {
                    that.$utils.showToast('text', '请授权录音')
                  }
                  that.isLongPress = false
                }
              })
            } else if (recordAuth == true) { // 用户已经同意授权
              that.startRecord()
            } else { // 第一次进来，未发起授权
              mpvue.authorize({
                scope: 'scope.record',
                success: () => {//授权成功
                  showToast('success', '授权成功')
                }
              })
            }
          },
          fail: function () {
            that.$utils.showToast('error', '鉴权失败，请重试')
          }
        })
      },
      // 手动模拟按钮长按，
      longPressStart(e) {
        let that = this
        mpvue.hideToast()
        that.audioContext.destroy()
        that.timeOut = false
        that.moveUp = true
        that.allowSend = true
        that.yuyinTime = 0
        that.textTips = '上滑取消语音'
        that.y = e.clientY
        that.recordClicked = true
        setTimeout(() => { // ok
          if (that.recordClicked == true) {
            that.executeRecord()
          }
        }, 800)
      },
      // 语音按钮长按结束
      longPressEnd() {
        this.recordClicked = false
        // 第一次授权，
        if (!this.recorderManager) {
          this.isLongPress = false
          return
        }
        if (this.isLongPress === true) {
          this.isLongPress = false
          this.recorderManager.stop()
        }
      },
      // 语音与键盘切换
      changeSourceStatu () {
        let that = this
        that.showYuyinTips = false
        that.isIpx = that.baocunIpx
        that.moreFlag = false
        if (!that.showSource) {
          that.showSource = !that.showSource
          return
        }
        that.showSource = !that.showSource
        return
        // 系统权限
        mpvue.getSystemInfo({
          success (res) {
            if (!res.microphoneAuthorized) {
              mpvue.showModal({
                title: '无法录音',
                content: '请在手机的“设置”选项中,允许微信访问您的麦克风',
                showCancel: false,
                confirmText: '好',
                success (res) {
                  if (res.confirm) {
                  } else if (res.cancel) {
                  }
                }
              })
              return
            } else {
              if (that.showSource) {
                mpvue.getSetting({
                  success(res) {
                    if (!res.authSetting['scope.record']) {
                      mpvue.showModal({
                        title: '无法录音',
                        content: '请在小程序的“设置”页面,允许微信访问您的麦克风',
                        showCancel: false,
                        confirmText: '好',
                        success (res) {
                          if (res.confirm) {
                            mpvue.openSetting({
                              success: function (res) {
                                let recordAuth = res.authSetting['scope.record']
                                if (recordAuth == true) {
                                  that.showSource = !that.showSource
                                } else {
                                  return
                                }
                              }
                            })
                          } else if (res.cancel) {
                          }
                        }
                      })
                    } else {
                      that.showSource = !that.showSource
                    }
                  }
                })
              }
            }
          }
        })
      },
      // 获取历史记录
      getHistoryMsgsDone(error, obj) {
        var that= this
        if (error){
          if (that.failTimes==10){
            that.msgErrorStatus = true
            that.failTimes=0
            mpvue.hideLoading()
          }else{
            if ( !that.msgErrorStatus ){
              mpvue.showLoading({
                title: '消息恢复中...',
                mask: false
              })
              that.failTimes+=1
            }else {
              that.failTimes=0
            }
          }
          // that.msgErrorStatus = true
          nim.reconnection()
          clearTimeout(that.queryMsgsTimer)
          that.queryMsgsTimer = setTimeout(()=>{
            that.getHistoryMsg()
          },1000);
          return;
        }
        // mpvue.hideToast()
        this.messageArr = []
        if (!obj.msgs) {
          mpvue.hideToast()
          mpvue.hideLoading()
          return
        }
        that.msgErrorStatus = false
        mpvue.hideLoading()
        let allObj = new Map()
        //历史记录加入发送状态 标记为 成功
        this.messageArr = obj.msgs
        for (let i = 0; i < this.messageArr.length; i++) {
          // allObj[this.messageArr[i].idClient] = this.messageArr[i]
          allObj.set(this.messageArr[i].idClient,this.messageArr[i])
        }
        //获取失败消息
        let failMsgArr = storage.getLocalMsg();
        if (failMsgArr){
          failMsgArr=failMsgArr.filter(item =>{
            return item.to==this.chatTo
          }).map(item => {
            allObj.set(item.idClient, item)
            // let resendMsg={}
            // Object.assign(resendMsg,item)
            // resendMsg.file=null
            // app.globalData.nim.resendMsg({
            //         msg: resendMsg,
            //       })
          })
        }


        this.oldMsgList = allObj
        this.messageArr = this.convertRawMessageListToRenderMessageArr(allObj)
        this.reCalcAllMessageTime()
        this.showMsgArr = this.messageArr
        this.scrollTop = 999999
        console.log(this.showMsgArr)
        // 更新会话对象
        // store.dispatch({
        //   type: 'CurrentChatTo_Change',
        //   payload: this.talkInfo.sessionId
        // })
        // 告知服务器，标记会话已读
        this.flag = true
      },
      // 原始消息列表转化为适用于渲染的消息列表
      convertRawMessageListToRenderMessageArr(rawMsgList) {
        if (!rawMsgList) {
          // 没有这个人的聊天消息
          return
        }
        let messageArr = []
        // let keys = Object.keys(rawMsgList).sort()
        rawMsgList.forEach(rawMsg =>{
          let customStatus
          if (!rawMsg.custom) {
            return
          }
          customStatus = JSON.parse(rawMsg.custom)
          // 修复同一账户下多个常用就诊人消息串9-11 17:18
          if (this.talkInfo.apt_id != customStatus.aptId) {
            return
          }
          let msgType = ''
          // 8-24修改,custom不知道是什么类型，也不要通知类型
          if (rawMsg.type === 'custom') {
            return
          }
          if (rawMsg.type === 'custom' && JSON.parse(rawMsg['content'])['type'] === 1) {
            msgType = '猜拳'
          } else if (rawMsg.type === 'custom' && JSON.parse(rawMsg['content'])['type'] === 3) {
            msgType = '贴图表情'
          } else {
            msgType = rawMsg.type
          }
          let displayTimeHeader = this.judgeOverTwoMinute(rawMsg.time, messageArr)
          let sendOrReceive = rawMsg.flow === 'in' ? 'receive' : 'send'
          let specifiedObject = {}
          switch(msgType) {
            case 'text': {
              specifiedObject = {
                nodes: this.$utils.generateRichTextNode(rawMsg.text)
              }
              break
            }
            case 'image': {
              let fileInfo={}
              if (rawMsg.status==nim.msgStatus_success){//云信生成的正常的消息
                fileInfo=rawMsg.file
                rawMsg.localFilePath=rawMsg.file.name
              }else {//本地构造的假消息
                fileInfo.url=rawMsg.localFilePath
                fileInfo.w=200
                fileInfo.h=200
              }
              specifiedObject = {
                nodes: this.$utils.generateImageNode(fileInfo)
              }
              break
            }
            case 'geo': {
              specifiedObject = {
                geo: rawMsg.geo
              }
              break
            }
            case 'audio': {
              specifiedObject = {
                audio: rawMsg.file
              }
              break
            }
            case 'video': {
              specifiedObject = {
                video: rawMsg.file
              }
              break
            }
            default: {
              break
            }
          }
          messageArr.push(Object.assign({}, {
            from: rawMsg.from,
            type: msgType,
            text: rawMsg.text || '',
            time: rawMsg.time,
            idClient:rawMsg.idClient,
            status:rawMsg.status,
            localFilePath:rawMsg.localFilePath,
            sendOrReceive,
            displayTimeHeader
          }, specifiedObject))
        })

        return messageArr
      },
      // 重新计算时间头
      reCalcAllMessageTime() {
        let tempArr = [...this.messageArr]
        if (tempArr.length == 0) return
        // 计算时差
        tempArr.map((msg, index) => {
          if (index === 0) {
            msg['displayTimeHeader'] = this.$utils.calcTimeHeader(msg.time)
          } else {
            let delta = (msg.time - tempArr[index - 1].time) / (120 * 1000)
            if (delta > 1) { // 距离上一条，超过两分钟重新计算头部
              msg['displayTimeHeader'] = this.$utils.calcTimeHeader(msg.time)
            }
          }
        })
        this.messageArr = tempArr
      },
      //选择常用语
      touseword(){
        this.$router.push( "/pages/center/child/usefulWord/main")
      },
      // 发起视频
      videoCall () {
        if (getApp().globalData.waitingUseVideoCall) {
          this.$utils.showToast('text', '请勿频繁操作', {duration: 2000})
          return
        }
        this.isIpx = this.baocunIpx
        this.moreFlag = false
        mpvue.navigateTo(
          {
            url: `/pages/subPage/child/videoCall/main`
          }
        )
        // 关闭页面  通知该会话结束
        store.dispatch({
          type: 'CurrentChatTo_Change',
          payload: ''
        })
      },
      // 倒计时回调 结束
      chatAllowEnd (value) {
        this.chatEnd = value
      },
      // 查看图片
      lookImg (item) {
        let arr = []
        for (let i = 0; i < this.showMsgArr.length; i++) {
          if (this.showMsgArr[i].type === 'image') {
            arr.push(this.showMsgArr[i].nodes[0].attrs.src)
          }
        }
        mpvue.offAppHide()
        mpvue.previewImage({
          current: item.nodes[0].attrs.src, // 当前显示图片的http链接
          urls: arr // 需要预览的图片http链接列表
        })
      },
      // 查看侧边栏详情
      sideDetails () {
        this.showLeft = true
      },
      // * 保存数据到store
      saveChatMessageListToStore(rawMsg, handledMsg) {
        store.dispatch({
          type: 'RawMessageList_Add_Msg',
          payload: { msg: rawMsg }
        })
      },
      /**
       * 统一发送消息后打回的错误信息
       * 返回true表示有错误，false表示没错误
       */
      handleErrorAfterSend (err) {
        if (err) {
          if (err.code == 7101) {
            showToast('text', '你已被对方拉黑')
          }
          return true
        }
        return false
      },
      // 键盘回车事件
      inputSend(e) {
        let that = this
        console.log(this.canSend,'发送发送')
        if(that.canSend === '1') {
          that.$utils.showToast('text', '您的服务已经结束，无法发送消息')
          console.log('执行')
          return
        }
        that.showYuyinTips = false
        if (!that.inputValue) {
          that.$utils.showToast('text', '请输入内容')
          return
        }
        that.sendRequest(e)
        that.inputValue = ''
        that.moreFlag = false
        that.isIpx = that.baocunIpx
        // this.sendRequest(e.detail.value)
      },
      // 发送网络请求：发送文本消息(包括emoji)
      sendRequest(text) {
        let self = this
        let newObject = {
          // 多个就诊人区分
          regular_id: self.talkInfo.regular_id + '',
          category: self.talkInfo.category + '',
          aptId: self.talkInfo.apt_id
        }
        var localMsg = nim.sendText({
          scene: 'p2p',
          to: self.chatTo,
          text: text,
          custom: JSON.stringify(newObject),
          done: (err, msg) => {
            // if (msg.resend){
            //   console.log('重发消息',msg)
            //   if (err){
            //     nim.reconnection()
            //   }
            //   return
            // }
            // 判断错误类型，并做相应处理
            if (self.handleErrorAfterSend(err)) {
              nim.reconnection()
            }
            let localMsgArr = storage.getLocalMsg();
            if (err){
              for (let i = 0; i < localMsgArr.length; i++) {
                if (msg.to==localMsgArr[i].to && msg.idClient==localMsgArr[i].idClient){
                  localMsgArr[i]=msg//发送失败，将本地消息状态改为失败
                  storage.setLocalMsg(localMsgArr)
                  console.log('修改本地失败消息状态')
                  break;
                }
              }
              for (let i = 0; i < self.showMsgArr.length; i++) {
                let item = self.showMsgArr[i]
                if (msg.idClient == item.idClient) {//显示列表数据无to,只判断时间即可
                  console.log('修改列表消息')
                  item.status = msg.status//将消息状态改为失败
                  break;
                }
              }
            }else {
              for (let i = 0; i < localMsgArr.length; i++) {
                if (msg.idClient==localMsgArr[i].idClient ){
                  localMsgArr.splice(i,1)//发送成功移除消息
                  storage.setLocalMsg(localMsgArr)
                  console.log('移除本地发送成功消息')
                  break;
                }
              }
                for (let i = 0; i < self.showMsgArr.length; i++) {
                  if (msg.idClient == self.showMsgArr[i].idClient) {
                    console.log('修改列表消息')
                    self.showMsgArr[i].status = msg.status//将消息状态改为成功
                    self.oldMsgList.delete(self.showMsgArr[i].idClient)
                    self.showMsgArr[i].idClient = msg.idClient
                    self.oldMsgList.set(msg.idClient,msg)
                    break;
                  }
                }
                clearTimeout(self.refresTime)
								self.refresTime = setTimeout(function() {
									self.getHistoryMsg()
                  console.log('发送成功，重新加载')
								}, 5 * 1000);
            }

          }
        });
        this.saveChatMessageListToStore(localMsg)//存储loading中消息
        self.inputValue = ''
        self.focusFlag = false
        setTimeout(() => {
          self.scrollTop = this.scrollTop + 200
        },100)
      },
      // 点击病人头像查看病人的详细信息 打开遮罩层
      queryDetails () {
        this.showLeft = true
      },
      // 关闭遮罩层
      toggleLeft() {
        this.showLeft = !this.showLeft
      },
      // 失去焦点
      inputBlur (e) {
        this.focusFlag = false
      },
      // 获取焦点
      inputFocus (e) {
        this.emojiFlag = false
        this.focusFlag = false
      },
      // 收起所有输入框
      chatingWrapperClick () {
        this.foldInputArea()
      },
      // 收起所有键盘
      foldInputArea() {
        this.focusFlag = false
        this.emojiFlag = false
        this.moreFlag = false
        this.tipFlag = false
        this.isIpx = this.baocunIpx

      },
      // 阻止时间冒泡
      stopEventPropagation() {
      },
      // // 滚动条滚到底部
      // scrollToBottom() {
      //   mpvue.pageScrollTo({
      //     scrollTop: 9999,
      //     duration: 100
      //   })
      // },
      // 选择照片
      chooseImageToSend (e) {
        let type = e.currentTarget.dataset.type
        let self = this
        self.imgList = []
        self.nowLenght = 0
        self.moreFlag = false
        mpvue.offAppHide()
        mpvue.chooseImage({
          sourceType: ['album', 'camera'],
          sizeType: ['compressed'],
          success: function (res) {
            self.isIpx = self.baocunIpx
            let tempFilePaths = res.tempFilePaths
            self.sendImages(tempFilePaths)
          },
          fail: function() {
            self.isIpx = self.baocunIpx
          }
        })
      },
      /**
       * 统一发送消息后打回的错误信息
       * 返回true表示有错误，false表示没错误
       */
      handleErrorAfterSend(err) {
        if (err) {
          if (err.code == 7101) {
            showToast('text', '你已被对方拉黑')
          }
          return true
        }
        return false
      },
      // 发照片到nos
      sendImages(files) {
        // wx.showLoading({
        //   title: '发送中...',
        // })
        let self = this
        let to=self.chatTo
        let custom = {
          regular_id: self.talkInfo.regular_id + '',
          category: self.talkInfo.category + '',
          aptId: self.talkInfo.apt_id,
        }

        for (let i = 0; i < files.length; i++) {
          // 上传文件到nos
          var localMsg=nim.sendFile({
            type: 'image',
            scene: 'p2p',
            to: to,
            custom: JSON.stringify(custom),
            wxFilePath: files[i],
            uploadprogress: function(obj) {
              console.log('上传进度: ' + obj);
            },
            done:self.sendFileDone
          })
          self.saveChatMessageListToStore(localMsg)

        }
      },
      // 点击拍摄
      chooseImageOrVideo () {
        let self = this
        self.moreFlag = true
        self.isIpx = false
        mpvue.showActionSheet({
          itemList: ['照相', '视频'],
          success: function (res) {
            if (res.tapIndex === 0) { // 相片
              mpvue.chooseImage({
                sourceType: ['camera'],
                success: function (res) {
                  self.sendImageToNOS(res)
                },
              })
            } else if (res.tapIndex === 1) { // 视频
              mpvue.chooseVideo({
                sourceType: ['camera', 'album'],
                success: function (res) {
                  if (res.duration > 60) {
                    showToast('text', '视频时长超过60s，请重新选择')
                    return
                  }
                  // {duration,errMsg,height,size,tempFilePath,width}
                  self.sendVideoToNos(res)
                }
              })
            }
          }
        })
      },
    //emoji组件回调
      emojiCLick(e) {
        let val = e
        // 单击删除按钮，，删除emoji
        if (val == '[删除]') {
          let lastIndex = this.inputValue.lastIndexOf('[')
          if (lastIndex != -1) {
            this.inputValue = this.inputValue.slice(0, lastIndex)
          }
          return
        }
        if (val[0] == '[') { // emoji
          this.inputValue = this.inputValue + val
        } else {//大图
          this.sendBigEmoji(val)
        }
      },
      // emoji点击发送
      emojiSend(e) {
        let val = this.inputValue
        this.sendRequest(val)
        that.inputValue = ''
        this.emojiFlag = false
      },
      // 切出更多
      toggleMore() {
        let that = this
        that.showYuyinTips = false
        that.scrollId = ''
        that.moreFlag = !that.moreFlag
        if (that.moreFlag) {
          that.isIpx = false
          that.showSource = true
        } else {
          that.isIpx = that.baocunIpx
        }
        that.emojiFlag = false
        that.focusFlag = false
        // that.scrollTop = that.scrollTop + 200
        setTimeout(function() {
           that.scrollId = 'scrollBtm'
        }, 100);
      },
      // 切换出更多表情
      toggleEmoji() {
        this.sendType = 0
        this.emojiFlag = !this.emojiFlag
        this.moreFlag = false
        this.isIpx = true
      },
      // 距离上一条消息是否超过两分钟
      judgeOverTwoMinute(time, messageArr) {
        let displayTimeHeader = ''
        let lastMessage = messageArr[messageArr.length - 1]
        if (lastMessage) {//拥有上一条消息
          let delta = time - lastMessage.time
          if (delta > 2 * 60 * 1000) {//两分钟以上
            displayTimeHeader =  this.$utils.calcTimeHeader(time)
          }
        } else {//没有上一条消息
          displayTimeHeader =  this.$utils.calcTimeHeader(time)
        }
        return displayTimeHeader
      }
    },
    onUnload () {
      let sessionId = this.talkInfo.sessionId || this.videoInfo.sessionId
      let arr = this.$storage.getMsg() || [] // 本地缓存数据
      let obj = {
        aptId: this.talkInfo.apt_id,
        text: this.inputValue,
        endTime: this.talkInfo.diagnose_time
      }
      // 输入框保存   有消息未发送时  就保存起来，如果退出时消息为空  那我们就把当初预约id，预约类型匹配的数据清了
      if (this.inputValue.trim() !== '') {
        for (let i = 0; i < arr.length; i++) {
          // 清掉该患者的保存记录
          if (arr[i].aptId == obj.aptId) {
            arr[i].text = obj.text
            this.$storage.saveMsg(arr)
            return
          }
        }
        arr.push(obj)
        this.$storage.saveMsg(arr)
      } else {
        if (arr.length  > 0) {
          for (let i = 0; i < arr.length; i++) {
            // 清掉该患者的保存记录
            if (arr[i].aptId == obj.aptId) {
              arr.splice(i, 1)
            }
          }
          this.$storage.saveMsg(arr)
        }
      }
      // this.$store.commit(this.$types.ALL_CHAT, this.allChat)
      this.showLeft = false
      this.moreFlag = false
      this.isIpx = false
      this.scrollTop = 0
      this.chatEnd = false
      this.time = ''
      this.flag = false
      this.failTimes = 0
      this.msgErrorStatus = false
      this.audioContext.destroy() // 清楚语音放送
      mpvue.hideLoading()
      clearInterval(this.timeInterval)
      // 清空正在聊天的对象
      store.dispatch({
        type: 'CurrentChatTo_Change',
        payload: ''
      })
    }
  }
</script>

<style scoped lang='less'>
	.msgError {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  margin-left: -300rpx;
	  margin-top: -150rpx;
	  width:600rpx;
	  height:300rpx;
	  border: 1rpx solid #ccc;
	  background: #fff;
	  border-radius: 20rpx;
	  display: flex;
	  flex-direction: column;
	  .topDiv {
	    margin: 20rpx 0;
	    text-align: center;
	    font-weight: bold;
	  }
	  .midDiv {
	    flex: 1;
	    padding: 0 50rpx;
	    text-align: center;
	    color: #ccc;
	  }
	  .btmDiv {
	    height: 100rpx;
	    display: flex;
	    border-top: 1rpx solid #ccc;
	    div {
	      flex: 1;
	      text-align: center;
	      line-height: 100rpx;
	    }
	    div:nth-child(1) {
	      border-right: 1rpx solid #ccc;
	    }
	  }
	}
	.failDiv {
	  width: 50rpx;
	  margin-right: 10rpx;
	  display: flex;
	  align-items:center;
	  justify-content:center;
	}
	.msgFail {
	  width: 50rpx;
	  height: 50rpx;
	}
  .endChat {
    margin: 20rpx 0;
    text-align: center;
    font-size: 28rpx;
    color: #ccc;
  }
  .tipsP {
    padding: 20rpx;
    p {
      color: #999999;
      font-size:30rpx;
      height: 40rpx;
      line-height: 40rpx;
    }
  }
  .infoDetails {
    display: flex;
    padding: 20rpx;
    .headImg {
      margin-right: 17rpx;
    }
    .info {
      flex: 1;
      .name {
        font-size:22rpx;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: 30rpx;
        color: #999999;
        margin-bottom: 6rpx;
      }
      .init {
        box-shadow:0px 1px 8px 1px rgba(217,216,216,0.5);
        border-radius:7px;
        border:1px solid rgba(233,233,233,1);
        padding: 18rpx 0;
        .initTop {
          font-size:28rpx;
          font-weight:400;
          color:rgba(51,51,51,1);
          line-height:40rpx;
          border-bottom: 1rpx solid #D8D8D8;
          padding: 0 24rpx 10px 24rpx;
          img {
            width: 47rpx;
            height: 47rpx;
            display: inline-block;
            margin-right: 10rpx;
          }
        }
        .details {
          color: #333;
          font-size: 30rpx;
          padding: 20rpx 32rpx;
          .detailsTitle {
            height:42rpx;
            font-size:30rpx;
            font-weight:600;
            color:rgba(51,51,51,1);
            line-height:42rpx;
            color: #333333;
            margin-bottom: 5rpx;
          }
          .textInfo {
            margin-bottom: 18rpx;
          }
          .regular {
            display: flex;
            span {
              flex: 1;
            }
          }
          .blockClass{
            span{
              display: block;
            }
          }
        }
      }
    }
  }
  .btmDiv {
    position: relative;
    .spanDiv {
      position: relative;
      width: 215rpx;
      img {
        position: absolute;
        bottom: 0;
        left: 20rpx;
      }
      span {
        position: absolute;
        bottom: 0;
        left: 100rpx!important;
        height: 54rpx;
        line-height: 54rpx;
        width: 100rpx;
        text-align: center;
        background:rgba(235,245,255,1);
        border-radius:27rpx;
        border:1rpx solid rgba(167,214,255,1);
        color: #0088FF;
        font-size: 26rpx;
        margin-bottom:20rpx;
      }
    }
    .spanDiv1 {
      position: relative;
      width: 80rpx;
      img {
        position: absolute;
        bottom: 0;
        left: 0rpx;
      }
    }
    .textDiv {
      line-height: 40rpx;
      height: 100%;
      overflow-y: auto;
      padding-top: 15rpx;
    }
    .iosPadding {
      /* color: red!important; */
      padding-top: 15rpx!important;
      padding-left: 10rpx!important;
    }
  }
  .yuyinTip {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -180rpx;
    margin-top: -180rpx;
    width:360rpx;
    height:360rpx;
    background:rgba(0,0,0,1);
    border-radius:8rpx;
    opacity:0.74;
    .yuyinInit {
      width: 100%;
      height: 100%;
      z-index: 99;
      text-align: center;
      div {
        color: #fff;
        z-index: 99;
      }
      .imgYuyin {
        width: 106rpx;
        height: 156rpx;
        display: inline-block;
        margin: 76rpx 0 57rpx 0;
      }
      .gantan {
        width: 115rpx;
        height: 115rpx;
        display: inline-block;
        margin: 100rpx 0 73rpx 0;
      }
    }
  }
  .active {
    padding-top: 30rpx;
    min-height: 200rpx!important;
  }
  .subPage {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .isIphone {
    padding-bottom: 50rpx!important;
  }
  .demo-container{
      width:40vh;
      height: 100vh;
      background:#fff;
      overflow-y: scroll;
      overflow-x: hidden;
    }
  .top {
    height: 80rpx;
    line-height: 80rpx;
    background: #FFF3E7;
    color: #FF9429;
    font-size: 24rpx;
    font-weight: 400;
    width: 100%;
    z-index:100;
    .topInit {
      padding: 0 38rpx;
    }
  }
  .chat {
    flex: 1;
    height: 100%;
    overflow: scroll;

  }
  .chating-wrapper {
    width: 100%;
    min-height: 100%;
    position: relative;
    /* margin: 70rpx 0 100rpx; */
    box-sizing: border-box;
    /* overflow: hidden; */
    background: #F3F4F6;
  }
  /* 收起键盘热区 */
  .fold-keyboad-wrapper {
    position: fixed;
    top: 70rpx;
    width: 100%;
    height: 500rpx;
  }
  /*历史消息  */
  .chating-history {
    position: fixed;
    padding: 0 20rpx;
    width:100%;
    height:80rpx;
    line-height:80rpx;
    box-sizing: border-box;
    border: 1px solid #E7E7E7;
    background-color: #E7E7E7;
    z-index: 1;
    color: #888888;
    font-size: 30rpx;
  }
  .chating-history-left {
    float: left;
    color: #666;
  }
  .chating-history-right {
    float: right;
  }
  /*聊天输入框  */
  .chatinput-wrapper {
    /* height: 98rpx; */
    width: 100%;
    background-color: #fff;
  }
  .chatinput-content {
    display: flex;
    padding: 0 20rpx;
    justify-content: center;
  }
  .chatinput-img{
    width: 56rpx;
    height: 56rpx;
    border-radius: 100%;
    margin-bottom: 10rpx;
    display: inline-block;
    padding: 10rpx;
  }
  .chatinput-img.emoji{
    margin-right: 0;
  }
  .chatinput-img:active {
    opacity: .6;
  }
  .sendInput {
    flex: 1;
    border: 1rpx solid #ccc;
    display: inline-block;
    border-radius: 35rpx;
    margin: 16rpx 0;
    padding: 0 5rpx;
    min-height: 60rpx!important;
    word-break: break-all;
    max-height: 5.2em!important;
  }
  .chatinput-input {
    flex: 1;
    border: 1px solid #ccc;
    display: inline-block;
/*    vertical-align:top;
    box-sizing:border-box;
    padding-left: 30rpx;
    font-size: 30rpx;
    line-height: 30rpx;
    border-radius: 50rpx;
    margin-top: 15rpx;
    max-height: 120rpx!important; */
  }
  .pressBtn {
    flex: 1;
    border-radius: 50rpx;
    // margin: 15rpx 0;
    // height: 72rpx;
    line-height: 72rpx;
    border: 1px solid #ccc;
    text-align: center;
    margin: 11rpx 0;
    padding: 0 7.5rpx;
    min-height: 62rpx!important;

  }
  .chatinput-voice-mask {
    width: 466rpx;
    height: 76rpx;
    line-height: 76rpx;
    display: inline-block;
    border-radius: 12rpx;
    border: 1px solid #ccc;
    margin-top: 12rpx;
    vertical-align:top;
    box-sizing:border-box;
    /* padding-left: 20rpx; */
    font-size: 30rpx;
    text-align: center;
    color: #333336;
    background-color: #fff;
    letter-spacing: 4rpx;
  }
  .chatinput-voice-mask-hover {
    background-color: #cecece;
    color: #333336;
  }
  /*subcontent wrapper  */
  .chatinput-subcontent {
  width: 100%;
  height: 470rpx;
  background-color: #999;
  }
  .fr {
    float: right;
  }
  /* more-subcontent */
  .more-subcontent {
    position: absolute;
    z-index: 9999;
    padding: 40rpx 30rpx;
    box-shadow:0px 1rpx 0px 0px rgba(204,204,204,1);
    .more-subcontent-item {
      .image {
        width:112rpx;
        height:112rpx;
        border-radius:50%;
        margin-bottom: 12rpx;
      }
    }
  }
  .image {
    width:112rpx;
    height:112rpx;
    border-radius:50%;
    margin-bottom: 12rpx;
  }
  .text {
    font-size: 24rpx;
    text-align:center;
    color: #6C7074;
  }
 .more-subcontent-item {
    display:flex;
    flex-direction:column;
    margin-bottom: 30rpx;
  }
  .more-subcontent .more-subcontent-item .image {
    width:112rpx;
    height:112rpx;
    border-radius:50%;
    margin-bottom: 12rpx;
  }
  .more-subcontent .more-subcontent-item .text {
    font-size: 24rpx;
    text-align:center;
    color: #6C7074;
  }
  /*聊天记录  */
  .record-wrapper {
    width: 100%;
  }
  .record-chatting-item {
    width: 100%;
    padding: 20rpx 20rpx;
    box-sizing: border-box;
  }
  .record-item-time-wrapper {
    display:flex;
    flex-direction:row;
    justify-content:center;
  }
  .record-item-time {
    padding:4rpx 10rpx;
    background: #D6D6D6;
    border-radius: 8rpx;
    font-size: 24rpx;
    color: #fff;
  }
  .record-chatting-item-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 100%;
    display: inline-block;
  }

  .record-chatting-item-text {
    max-width: 70%;
    border-radius: 8rpx;
    background-color: #3387FF;
    padding: 16rpx;
    box-sizing:border-box;
    word-wrap:break-word;
    overflow: hidden;
    font-size: 32rpx;
    line-height: 48rpx;
  }
  .record-chatting-item-text.nobg {
    background: transparent;
    margin-left: 20rpx;
    margin-right: 20rpx;
  }
  /* tip消息富文本 */
  .tip-rich-text {
    background-color:#ccc;
    text-align:center;
    align-self:center;
    min-height:40rpx;
    word-break:break-word;
    font-size:26rpx;
    padding:0 20rpx;
    color:#000;
    border-radius: 10rpx;
  }

  .self {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    color: #fff;
  }
  .other {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    color: #222;
  }
  .left-triangle{
    height:0px;
    width:0px;
    border-width:20rpx;
    border-style:solid;
    border-color:transparent #fff transparent transparent;
    margin-top: 20rpx;
  }
  .right-triangle{
    height:0px;
    width:0px;
    border-width:20rpx;
    border-style:solid;
    border-color:transparent transparent transparent #0088FF;
    margin-top: 20rpx;
  }
  .video-triangle {
    height:0px;
    width:0px;
    border-width:30rpx;
    border-style:solid;
    border-color:transparent transparent transparent #777;
    margin-top: 20rpx;
    margin-left: 30rpx;
  }

  .small-map-wrapper {
    overflow: hidden;
    width: 452rpx;
    height:300rpx;
    position:relative;
    border-radius:8rpx;
  }
  .self .small-map-wrapper {
    margin-right: 20rpx;
  }
  .other .small-map-wrapper {
    margin-left: 20rpx;
  }
  .small-map-wrapper .small-geo-img {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
  .small-map-wrapper .text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    width: 100%;
    padding: 10rpx;
    min-height: 70rpx;
    /* line-height: 70rpx; */
    opacity: 0.75;
    font-size: 28rpx;
    /* white-space: nowrap; */
    text-align: center;
    text-overflow: ellipsis;
    background-color:#444;
    color:#fff;
  }

  .small-video-wrapper {
    margin-left: 20rpx;
    margin-right: 20rpx;
    width:200rpx;
    height:200rpx;
    padding:10rpx;
    background-color:#fff;
    border-radius:20rpx;
    display:flex;
    justify-content:center;
    flex-direction:column;
    align-items:center;
  }
  .small-video-wrapper .video {
    max-width:200px;
    max-height:300px;
  }

  .audio-wrapper {
    background-color:#0088FF;
    border-radius:7rpx;
    display:flex;
    justify-content:flex-end;
    padding:0 20rpx;
    box-sizing:border-box;
    margin-left:-2px;
    box-shadow:0px 1px 8px 1px rgba(217,216,216, 0.5);
    min-width: 80rpx;
  }
  .send-audio {
    background: #fff!important;
  }
  .audio-wrapper .audioImage {
    width:30rpx;
    height:30rpx;
    align-self:center;
    margin-left: 12rpx;
  }
  .leftSendImg {
    width:30rpx;
    height:30rpx;
    align-self:center;
    margin-right: 12rpx!important;
  }
  .audio-wrapper .text {
    align-self:center;
    color:#fff
  }
  .leftSend {
    justify-content:flex-start!important;
  }
  .usefulWord{
    width:220rpx;
    height:80rpx;
    background:rgba(235,245,255,1);
    border-radius:8rpx;
    border:1px solid rgba(167,214,255,1);
    font-size:30rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(0,136,255,1);
    line-height:80rpx;
    margin: 15rpx ;
    text-align: center;
  }
</style>
